<template>
    <div class="waiter">
        <!-- head开始 -->
        <div class="ch">
            <div class="block">
                <el-date-picker
                style="height:28px"
                size='mini'
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
                </el-date-picker>
            </div>
            <el-select v-model="select" style="margin: 0 15px;" slot="prepend" size="mini" placeholder="请选择类型">
               <el-option label="充值" value="1"></el-option>
               <el-option label="收益" value="2"></el-option>
               <el-option label="体现" value="2"></el-option>
            </el-select>
            <el-select v-model="select1" style="margin-right:15px;" slot="prepend" size="mini" placeholder="请选择状态">
               <el-option label="正常" value="1"></el-option>
               <el-option label="未审核" value="2"></el-option>
            </el-select>
             <el-select v-model="select1" slot="prepend" size="mini" placeholder="请选择顾客编号">
               <el-option label="test" value="1"></el-option>
               <el-option label="111" value="2"></el-option>
               <el-option label="333" value="2"></el-option>
               <el-option label="curry" value="2"></el-option>
            </el-select>
            <el-button class="bu" style="margin-left: 15px;" type="primary" size='mini'>查询</el-button>
        </div>
    <!-- head结束 -->
     <!-- 表格开始 -->
    <el-table
      :data="waiters"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="transferMoney"
        label="交易金额"
        width="180">
      </el-table-column>
      <el-table-column
        prop="transferTime"
        label="交易时间"
        width="180">
        {{transferTime|moment('YYYY-MM-DD hh:mm:ss')}}
      </el-table-column>
      <el-table-column
        prop="type"
        label="交易类型">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
      prop="type"
        label="描述">
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="block">
        <el-pagination
            @current-change="changeHandler"
            :page-sizes="[2, 5, 10, 15,20]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
             :total="8">
        </el-pagination>
    </div>
    <!-- 分页结束 -->
    </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
    data() {
        return{
          list:{
            page:1,
            pageSize:8
          },
           dialogFormVisible:false,
           select:'',
           select1:'',
           pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
           },
           value2: '',

        }
    },
     computed:{
        ...mapState('waiter',['waiters','total','transferTime'])
    },
    methods:{
      ...mapActions('waiter',['findAllWaiter']),
        //切换页面
        changeHandler(page){
            this.list.page = page
            this.findAllWaiter(this.list)
        },
    },
    created(){
    this.findAllWaiter(this.list)
  }
}
</script>
<style scoped>
.waiter .ch{
    display: flex;
}
.waiter .ch .bu{
    background-color: #2cb5ac;
}
.waiter .block{
    float: right;
}
</style>